<template>
    <el-container class="panel-block">
        <el-header class="sa-header">
            <el-tabs class="sa-tabs" v-model="table.type" @tab-change="getData(1)">
                <el-tab-pane v-for="item in table.typeList" :key="item.id" :label="item.nurse_type_name"
                    :name="item.id"></el-tab-pane>
            </el-tabs>
            <div class="sa-title sa-flex sa-row-between">
                <div class="label sa-flex">
                    服务团队
                    <search-condition :conditionLabel="filterParams.conditionLabel"
                        @deleteFilter="deleteFilter"></search-condition>
                </div>
                <div>
                    <el-button class="sa-button-refresh" icon="RefreshRight" @click="getData()"></el-button>
                    <el-button class="sa-button-refresh" icon="Search" @click="openFilter"></el-button>
                    <el-button v-auth="'seller.admin.nurse.add'" type="primary" icon="Plus"
                        @click="addNurse">新建</el-button>
                </div>
            </div>
        </el-header>
        <el-main class="sa-p-0" v-loading="loading">
            <el-table height="100%" class="sa-table" :data="table.data" @sort-change="fieldFilter" row-key="id" stripe>
                <template #empty>
                    <sa-empty />
                </template>
                <el-table-column prop="nurse_number" label="人员ID" min-width="130" align="center"></el-table-column>
                <el-table-column label="人员图片" min-width="80" align="center">
                    <template #default="scope">
                        <div class="sa-flex sa-row-center">
                            <sa-preview :url="scope.row.nurse_picture" size="40"></sa-preview>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="nurse_name" label="人员名称" min-width="80" align="center"></el-table-column>
                <el-table-column prop="nurse_job" label="人员职位" min-width="100" align="center"></el-table-column>
                <el-table-column prop="stock_warning" label="人员类型" min-width="100" align="center">
                    <template #default="scope">
                        <div class="sa-flex sa-row-center">
                            {{ scope.row?.nurseType?.nurse_type_name }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="nurse_life" label="从业时间" min-width="80" align="center"></el-table-column>
                <el-table-column prop="proficient_content" label="擅长类型" min-width="100" align="center"
                    show-overflow-tooltip></el-table-column>
                <el-table-column prop="brief_introduction" label="简介内容" min-width="100" align="center"
                    show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" min-width="130" fixed="right" align="center">
                    <template #default="scope">
                        <el-button v-auth="'seller.admin.nurse.detail'" class="is-link" type="primary"
                            @click="editNurse(scope.row.id)">编辑</el-button>
                        <el-popconfirm
                            width="220"
                            confirm-button-text="确定"
                            cancel-button-text="取消"
                            title="删除后数据将无法恢复！确定删除吗？"
                            @confirm="deleteUser(scope.row.id)"
                        >
                            <template #reference>
                                <el-button v-auth="'seller.admin.nurse.delete'" class="is-link" type="danger">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>
        <sa-view-bar>
            <template #right>
                <sa-pagination :pageData="pageData" @updateFn="getData" />
            </template>
        </sa-view-bar>
    </el-container>
</template>
<script>
export default {
    name: 'seller.admin.settings.teams',
};
</script>
<script setup>
import { onMounted, reactive, ref } from 'vue';
import { api } from '../settings.service';
import { useModal, usePagination } from '@/sheep/hooks';
import { useSearch } from '@/sheep/components/sa-table/sa-search/useSearch';
import { composeFilter } from '@/sheep/utils';
import nurseEdit from './edit.vue';
import { cloneDeep } from 'lodash';
import SelfSearch from './search.vue';

const filterParams = reactive({
    tools: {
        keyword: {
            label: '人员信息',
            type: 'tinputprepend',
            placeholder: '请输入查询内容',
            field: 'keyword',
            keyword: {
                field: 'nurse_number',
                value: '',
            },
            options: [
                {
                    label: '人员ID',
                    value: 'nurse_number',
                },
                {
                    label: '人员名称',
                    value: 'nurse_name',
                },
                {
                    label: '人员职位',
                    value: 'nurse_job',
                },
            ],
        },
        nurse_type_id: {
            type: 'tselect',
            label: '人员类型',
            field: 'nurse_type_id',
            value: '',
            options: {
            data: [],
            props: {
                label: 'nurse_type_name',
                value: 'id',
            },
            },
        },
        nurse_life: { label: '从业时间', value: { min: '', max: '' } },
    },
    data: {
        keyword: { field: 'nurse_number', value: '' },
        nurse_type_id: '',
        nurse_life: { min: '', max: '' },
    },
    conditionLabel: {},
});
const { openFilter, deleteFilter } = useSearch({
    comp: SelfSearch,
    filterParams, getData 
});

const loading = ref(true);

// 表格
const table = reactive({
    type: 0,
    data: [],
    order: 'desc',
    sort: 'id',
    typeList: [
        {
            id: 0,
            nurse_type_name: "全部"
        }
    ]
});

const { pageData } = usePagination();

onMounted(() => {
    getTypeList();
    getData();

});
async function getTypeList() {
    const { error, data } = await api.teams.typeList();
    if (error === 0) {
        filterParams.tools.nurse_type_id.options.data = data;
        table.typeList = [
            {
                id: 0,
                nurse_type_name: "全部"
            },
            ...data
        ]
    }
}

// 获取数据
async function getData(page) {

    loading.value = true;
    if (page) pageData.page = page;
    let tempSearch = cloneDeep(filterParams.data);
    if (tempSearch.nurse_life.min && tempSearch.nurse_life.max) {
        tempSearch.nurse_life = `${tempSearch.nurse_life.min} - ${tempSearch.nurse_life.max}`;
    }
    let search = composeFilter(tempSearch, {
        nurse_number: 'like',
        nurse_name: 'like',
        nurse_job: 'like',
        nurse_life: 'between',
    });
    const { error, data } = await api.teams.list({
        id: table.type,
        page: pageData.page,
        list_rows: pageData.list_rows,
        ...search,
        order: table.order,
        sort: table.sort,
    });
    if (error === 0) {
        table.data = data.data;
        pageData.page = data.current_page;
        pageData.list_rows = data.per_page;
        pageData.total = data.total;
    }
    loading.value = false;
}
// table 字段排序
function fieldFilter({ prop, order }) {
    table.order = order == 'ascending' ? 'asc' : 'desc';
    table.sort = prop;
    getData();
}

function addNurse() {
    useModal(
        nurseEdit,
        {
            title: '添加店员',
            type: 'add'
        },
        {
            confirm: () => {
                getData();
            },
        },
    );
}
function editNurse(id) {
    useModal(
        nurseEdit,
        {
            title: '店员信息',
            type: 'edit',
            id
        },
        {
            confirm: () => {
                getData();
            },
        },
    );
}

async function deleteUser(id) {
   await api.teams.delete(id);
   getData();

}


</script>